<template>
  <section class="container">
    <!-- <h1 class="title">
      {{ error.statusCode || '500' }}
    </h1> -->
    <loading hint="网络请求中..." :show="isLoading"></loading>
    <h2 class="info">
      网速太慢，请网速正常后再试
      <!-- {{ error.message || '网络繁忙，请稍后再试' }} -->
    </h2>
    <div class="auto-back"><span class="time">{{second}}</span>秒&nbsp;后自动返回</div>
    <nuxt-link class="button" to="/">
      返回首页
    </nuxt-link>
  </section>
</template>
<script>
import loading from '~/components/loading'

export default {
  components: {
    loading
  },
  props: ['error'],
  data: () => ({
    second: 6,
    isLoading: true,
    loadingSecond: 2,
  }),
  beforeMount() {
    setTimeout(() => {
      this.isLoading = false
      let startS = this.second
      let t = setInterval(() => {
        this.second = startS--
        if (this.second <= 1) {
          clearInterval(t)
          this.$router.replace('/')
        }
      }, 1000)
    }, this.loadingSecond * 1000);
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'

section
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  background-color: #eee;
  // background-image: url(~assets/img/500.svg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center
  &::before
    content ''
    position absolute
    top 0
    left 0
    right 0
    height 4rem
    background-image: linear-gradient(to right, #febf01 5%,#0149a0 5%,#0149a0 9%,#ffffff 10%,#ffffff 10%,#ffffff 15%,#0149a0 16%,#0149a0 16%,#0149a0 22%,#0149a0 22%,#0294c9 22%,#0294c9 23%,#0294c9 23%,#0294c9 27%,#0294c9 27%,#fcfcfc 28%,#fcfcfc 33%,#f90707 34%,#f90707 34%,#f90707 39%,#febf01 40%,#febf01 46%,#0149a0 47%,#0149a0 47%,#0149a0 53%,#f90707 54%,#f90707 62%,#fcfcfc 63%,#fcfcfc 67%,#0149a0 68%,#0149a0 76%,#0294c9 77%,#0294c9 84%,#fcfcfc 85%,#fcfcfc 90%,#febf01 91%,#febf01 96%,#0149a0 97%);
    background-size 50% 100%

.loading{
  background-color: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 2;
}
.loading img {
  width: 6rem;
}
.title
{
  margin-top: 15px;
  font-size: 5em;
}
.info
{
  font-weight: 700;
  font-size: 1.6rem;
  color: $color-main;
  padding-top: 30px;
}
.auto-back{
  line-height: 4;
  color: #666;
}
.auto-back .time{
  color: $color-main;
  /* letter-spacing: 5px; */
  font-weight: 700;
}
.button
{
  display: inline-block;
  padding: 10px 50px;
  margin-bottom: 20rem;
  margin-top: 50px;
  background: $color-main;
  color: $color-white;
  font-size: 1.6rem;
  border-radius: 5px;
}
/* img {
  margin: 7rem 12rem 1rem;
  width: calc(100% - 24rem);
} */
</style>
